Context

I saw an opportunity to create something more meaningful: an experience that not only entertains but also draws from the symbolic structure of zodiac traditions. I did some research on the Characters' development which was written and decided by the anime writers.

I wanted to explore how a familiar system as the zodiac, could be used as a framework to create a more intentional connection between users and the Demon Slayer universe.

Target Audience

Anime fans particularly Demon Slayer fans who enjoy character alignment games and interactive web experiences and also fans into astrology and zodiac readings.

Design Process

Research: Characters & Zodiac System

I began the process with research to ground the concept in meaning rather than randomness.

• Demon Slayer Character Research:

  I analyzed each Character’s personality traits, values, fighting style, and narrative role. This helped identify defining characteristics such as discipline, passion, calmness, or unpredictability that could be mapped symbolically to zodiac traits. Since there are only 9 Hashiras, i added the 3 main characters as part of the hashira to make them a total of 12.

• Zodiac System Research:

  I studied the traditional zodiac structure, focusing on how signs are grouped by date ranges and associated personality traits. This framework informed how users’ birthdates could logically translate into character pairings.

This research phase ensured that each Hashira assignment felt intentional and believable, rather than chance. I also researched imagery and sound effects by the characters to make it more interactive.

Low-Fidelity Wireframe

With the logic defined, I created low-fidelity wireframes to map the core experience for both small screens and large screens:

• Landing screen

• Rules on game

• Date of birth input

• Character result

At this stage, the focus was on flow, clarity, and interaction, not visuals.

High-Fidelity Wireframe

Next, I refined the layouts into high-fidelity wireframes, introducing anime-inspired typography, color, and hierarchy. Prototyping helped fine-tune overlay behavior, transitions, and pacing before development.

Web Development

Using the high-fidelity wireframes and prototype as reference, I translated the design into a functional website using HTML, CSS, and JavaScript. The goal was to create an interactive and responsive experience that worked as a single-page website with overlaying popups.

HTML and CSS

With the HTML I provided a structured content, form input, and result containers.

In CSS, I used Grid to arrange characters in a circular layout, reinforcing the zodiac metaphor, along with media queries to ensure responsiveness across devices.

Javascript

JavaScript was the backbone of the game’s interactivity.

• It captured the date of birth input from the user and applied logic to determine which Hashira character aligned with their zodiac placement. I implemented a switch function that evaluated the birth month (and in some cases the day) to decide the outcome. The image shows the code for the logic.
• It dynamically renders the results on the same page, updating text, images, descriptions, and sound effects without needing a page reload.

Web Hosting and Deployment

Once the web development was complete, I focused on making the game accessible online so users could experience it directly. I chose Vercel for deployment because of its seamless integration with GitHub and its optimization for front-end projects.

All development files (HTML, CSS, JavaScript, and assets) were stored and organized in a GitHub repository. I connected the repository to Vercel so that every push to the main branch automatically triggered a new build and deployment.

The Solution

The final solution is a responsive, single-page web game that allows users to discover their Hashira identity through a zodiac-inspired system. The circular layout visually represents the zodiac cycle, while overlays and transitions create a smooth, app-like experience.

The result is a playful yet structured interaction that connects anime storytelling with personalized design.

Outcome and Results

The MyHashira Zodiac Game successfully evolved from a creative concept into a fully deployed interactive web experience.

The result is a responsive, interactive website that merges Demon Slayer anime fandom with zodiac storytelling, showing the ability to take a concept through design, development, and deployment while creating an engaging experience for users.

Reflection

Building the MyHashira Zodiac Game was both fun and challenging, it pushed me to think beyond just visuals and really focus building upon my web developing skills on how design and code work together especially with Javascript since it was my first time using it.

This project strengthened my confidence in bridging design and development and also reinforced my ability to create engaging user experiences while applying real-world skills in responsiveness, interactivity, and engagement.